<template>
	<div class="register_view">
		<div class="register_container">
			<!-- 左侧背景区域 -->
			<div class="register_left">
				<div class="left_content">
					<h2 class="left_title">成为导师</h2>
					<p class="left_subtitle">分享您的专业知识，帮助年轻创业者成长</p>
					<div class="stats_cards">
						<div class="stat_card">
							<div class="card_label">导师优势</div>
							<div class="stat_content">
								<div class="stat_item">
									<i class="el-icon-s-custom"></i>
									<span>扩展您的专业网络</span>
								</div>
								<div class="stat_item">
									<i class="el-icon-s-flag"></i>
									<span>分享行业经验与知识</span>
								</div>
								<div class="stat_item">
									<i class="el-icon-s-opportunity"></i>
									<span>接触创新创业项目</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 右侧注册表单区域 -->
			<div class="register_right">
				<el-form :model="registerForm" class="register_form">
					<div class="title_view">导师注册</div>
					<div class="form-content">
						<!-- 导师类型 -->
						<div class="form-group">
							<label class="form-label">导师类型：</label>
							<el-select 
								class="form-select"
								v-model="registerForm.leixing" 
								placeholder="请选择类型">
								<el-option label="校内导师" value="校内导师"></el-option>
								<el-option label="校外导师" value="校外导师"></el-option>
							</el-select>
						</div>

						<!-- 账号信息 -->
						<div class="form-group" v-show="registerForm.leixing === '校内导师'|| registerForm.leixing === '校外导师'">
							<label class="form-label">{{ registerForm.leixing === '校内导师' ? '导师工号' : '账号' }}：</label>
							<input class="form-input" v-model="registerForm.daoshigonghao" 
								:placeholder="registerForm.leixing === '校内导师' ? '请输入导师工号' : '请输入账号4~10位'" type="text" />
						</div>

						<!-- 基本信息 -->
						<div class="form-group">
							<label class="form-label">导师姓名：</label>
							<input class="form-input" v-model="registerForm.daoshixingming" placeholder="请输入导师姓名" type="text" />
						</div>

						<div class="form-group">
							<label class="form-label">性别：</label>
							<el-select class="form-select" v-model="registerForm.xingbie" placeholder="请选择性别">
								<el-option v-for="item in daoshixingbieLists" :label="item" :value="item"></el-option>
							</el-select>
						</div>

						<!-- 密码设置 -->
						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">密码：</label>
								<input class="form-input" v-model="registerForm.mima" placeholder="请输入密码" type="password" />
							</div>
							<div class="form-group half">
								<label class="form-label">确认密码：</label>
								<input class="form-input" v-model="registerForm.mima2" type="password" placeholder="请输入确认密码" />
							</div>
						</div>

						<!-- 地区信息 -->
						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">城市：</label>
								<el-select 
									class="form-select"
									v-model="registerForm.chengshi" 
									placeholder="请选择城市"
									@change="(e)=>change1(e,'chengshi')">
									<el-option v-for="item in daoshichengshiLists" :label="item" :value="item"></el-option>
								</el-select>
							</div>
							<div class="form-group half" v-if="registerForm.leixing === '校内导师'">
								<label class="form-label">学校：</label>
								<el-select 
									class="form-select"
									v-model="registerForm.xuexiao"
									placeholder="请选择学校">
									<el-option v-for="item in daoshixuexiaoLists" :label="item" :value="item"></el-option>
								</el-select>
							</div>
							<div class="form-group half" v-if="registerForm.leixing === '校外导师'">
								<label class="form-label">园区：</label>
								<el-select 
									class="form-select"
									v-model="registerForm.yuanqu" 
									placeholder="请选择园区">
									<el-option v-for="item in daoshiyuanquLists" :label="item" :value="item"></el-option>
								</el-select>
							</div>
						</div>

						<!-- 头像上传 -->
						<div class="form-group">
							<label class="form-label">头像：</label>
							<div class="upload-wrapper">
								<uploads
									action="file/upload" 
									tip="请上传头像"
									style="width: 100%;text-align: left;"
									:fileUrls="registerForm.touxiang?registerForm.touxiang:''" 
									@change="touxiangUploadSuccess">
								</uploads>
							</div>
						</div>

						<!-- 专业信息 -->
						<div class="form-row">
							<div class="form-group half" v-show="registerForm.leixing === '校内导师'">
								<label class="form-label">职称：</label>
								<input class="form-input" v-model="registerForm.zhicheng" placeholder="请输入职称" type="text" />
							</div>
							<div class="form-group half">
								<label class="form-label">项目分类：</label>
								<el-select 
									class="form-select"
									v-model="registerForm.xiangmufenlei" 
									placeholder="请选择项目分类">
									<el-option v-for="item in daoshixiangmufenleiLists" :label="item" :value="item"></el-option>
								</el-select>
							</div>
						</div>

						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">专业经验：</label>
								<input class="form-input" v-model="registerForm.zhuanyejingyan" placeholder="请输入专业经验" type="text" />
							</div>
							<div class="form-group half">
								<label class="form-label">指导经验：</label>
								<input class="form-input" v-model="registerForm.zhidaojingyan" placeholder="请输入指导经验" type="text" />
							</div>
						</div>

						<div class="form-group" v-show="registerForm.leixing === '校外导师'">
							<label class="form-label">所在单位：</label>
							<input class="form-input" v-model="registerForm.suozaidanwei" placeholder="请输入所在单位" type="text" />
						</div>

						<div class="form-group">
							<label class="form-label">个人简介：</label>
							<textarea class="form-textarea" v-model="registerForm.gerenjianjie" placeholder="请输入个人简介"></textarea>
						</div>

						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">领域专长：</label>
								<input class="form-input" v-model="registerForm.lingyuzhuanzhang" placeholder="请输入领域专长" type="text" />
							</div>
							<div class="form-group half">
								<label class="form-label">可指导项目类型：</label>
								<input class="form-input" v-model="registerForm.xiangmuleixing" placeholder="请输入可指导项目类型" type="text" />
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">指导过项目：</label>
							<input class="form-input" v-model="registerForm.zhidaoguoxiangmu" placeholder="请输入指导过项目" type="text" />
						</div>

						<!-- 联系方式与验证码 -->
						<div class="form-group">
							<label class="form-label">邮箱：</label>
							<input class="form-input" v-model="registerForm.youxiang" placeholder="请输入邮箱" type="text" />
						</div>
						
						<div class="form-group">
							<label class="form-label">验证码：</label>
							<div class="verification-code-wrapper">
								<input class="form-input code-input" v-model="emailCode" placeholder="请输入验证码" />
								<el-button class="send-code-btn" :disabled="getCodeType" :type="getCodeType?'info':'primary'" @click="getEmailCode">{{setCode}}</el-button>
							</div>
						</div>
						
						<div class="form-group">
							<label class="form-label">手机号：</label>
							<input class="form-input" v-model="registerForm.shoujihaoma" placeholder="请输入手机号" type="text" />
						</div>
						
						<div class="form-group">
							<label class="form-label">验证码：</label>
							<div class="verification-code-wrapper">
								<input class="form-input code-input" v-model="smsCode" placeholder="请输入验证码" />
								<el-button class="send-code-btn" :disabled="getSmsCodeType" :type="getSmsCodeType?'info':'primary'" @click="getSmsCode">{{setSmsCode}}</el-button>
							</div>
						</div>

						<!-- 按钮区域 -->
						<div class="button-wrapper">
							<el-button class="register-btn" type="primary" @click="handleRegister">注册</el-button>
							<div class="login-link" @click="close">已有账号，直接登录</div>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script setup>
	const change1=(e,conditionColumn)=>{
        // 清空相关选择
        registerForm.value.xuexiao = '';
        daoshixuexiaoLists.value = [];
        registerForm.value.yuanqu = '';
        daoshiyuanquLists.value = [];
        
        // 根据导师类型加载不同数据
        if(registerForm.value.leixing === '校内导师') {
            registerForm.value.xuexiao = '';
         	
        }
        daoshixuexiaoLists.value = [];
            context?.$http({
                url: `option/xuexiao/xuexiao?conditionColumn=${conditionColumn}&conditionValue=${e}`,
                method: "get"
            }).then(res => {
                daoshixuexiaoLists.value = res.data.data
            });
        context?.$http({
            url: `option/yuanqu/yuanqu?conditionColumn=${conditionColumn}&conditionValue=${e}`,
            method: "get"
        }).then(res => {
			daoshiyuanquLists.value = res.data.data
        });
    }
	
	import {
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
	} from 'vue';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const projectName = context?.$project.projectName
	//获取注册类型
	import { useRoute } from 'vue-router';
	const route = useRoute()
	const tableName = ref('daoshi')
	
	//公共方法
	const getUUID=()=> {
		return new Date().getTime();
	}

	// 添加验证码相关数据
	const emailCode = ref('')
	const time = ref(0)
	const setCode = ref('发送验证码')
	const getCodeType = ref(false)

	// 添加短信验证码相关数据
	const smsCode = ref('')
	const smsTime = ref(0)
	const setSmsCode = ref('发送验证码')
	const getSmsCodeType = ref(false)
	
	// 添加验证码倒计时函数
	const timer = () => {
		if(time.value > 0) {
			getCodeType.value = true
			setCode.value = time.value + 's'
			time.value--
			setTimeout(() => {
				timer()
			}, 1000)
		} else {
			time.value = 0
			setCode.value = '发送验证码'
			getCodeType.value = false
		}
	}

	// 添加短信验证码倒计时函数
	const smsTimer = () => {
		if(smsTime.value > 0) {
			getSmsCodeType.value = true
			setSmsCode.value = smsTime.value + 's'
			smsTime.value--
			setTimeout(() => {
				smsTimer()
			}, 1000)
		} else {
			smsTime.value = 0
			setSmsCode.value = '发送验证码'
			getSmsCodeType.value = false
		}
	}
	
	// 添加发送邮箱验证码函数
	const getEmailCode = () => {
		if(!registerForm.value.youxiang) {
			context?.$toolUtil.message('请输入邮箱', 'error')
			return false
		}
		if(registerForm.value.youxiang && (!context?.$toolUtil.isEmail(registerForm.value.youxiang))) {
			context?.$toolUtil.message('邮箱格式不正确', 'error')
			return false
		}
		time.value = 60
		timer()
		context?.$http({
			url: `daoshi/sendemail?email=${registerForm.value.youxiang}`,
			method: 'get'
		}).then(res => {
			context?.$toolUtil.message('验证码发送成功', 'success')
		})
	}
	
	// 添加发送短信验证码函数
	const getSmsCode = () => {
		if(!registerForm.value.shoujihaoma) {
			context?.$toolUtil.message('请输入手机号', 'error')
			return false
		}
		if(!context?.$toolUtil.isMobile(registerForm.value.shoujihaoma)) {
			context?.$toolUtil.message('手机号格式不正确', 'error')
			return false
		}
		smsTime.value = 60
		smsTimer()
		context?.$http({
			url: `common/sendFrontendSmsCode?mobile=${registerForm.value.shoujihaoma}`,
			method: 'get'
		}).then(res => {
			if(res.data.code === 0) {
				context?.$toolUtil.message('验证码发送成功', 'success')
			} else {
				context?.$toolUtil.message(res.data.msg || '验证码发送失败', 'error')
				smsTime.value = 0
				smsTimer()
			}
		}).catch(err => {
			context?.$toolUtil.message('验证码发送失败', 'error')
			smsTime.value = 0
			smsTimer()
		})
	}
	
	const registerForm = ref({
        xingbie: '',
        xiangmufenlei: '',
        leixing: '',
        yuanqu: '',
        chengshi: '',
        xuexiao: '',
        // 添加以下缺失字段
        daoshigonghao: '',
        mima: '',
        mima2: '',
        touxiang: '',
        zhicheng: '',
        zhuanyejingyan: '',
        zhidaojingyan: '',
        suozaidanwei: '',
        gerenjianjie: '',
        lingyuzhuanzhang: '',
        xiangmuleixing: '',
        zhidaoguoxiangmu: '',
        shoujihaoma: '',
        youxiang: ''
    })
	const daoshixingbieLists = ref([])
	const daoshixiangmufenleiLists = ref([])
	const daoshileixingLists = ref([])
	const daoshixuexiaoLists = ref([])
	const daoshichengshiLists = ref([])
	const daoshiyuanquLists = ref([])
	
	const init=()=>{
		daoshixingbieLists.value = "男,女".split(',')
		context?.$http({
			url:`option/xiangmufenlei/xiangmufenlei`,
			method:'get'
		}).then(res=>{
			daoshixiangmufenleiLists.value = res.data.data
		})
		context?.$http({
			url:`option/chengshi/chengshi`,
			method:'get'
		}).then(res=>{
			daoshichengshiLists.value = res.data.data
		})
		
		daoshileixingLists.value = "校内导师,校外导师".split(',')
	}
    const touxiangUploadSuccess=(fileUrls)=> {
        registerForm.value.touxiang = fileUrls;
    }

	// 多级联动参数
	//注册按钮
	const handleRegister = () => {
		let url = tableName.value + "/register";
		if ((!registerForm.value.daoshigonghao)) {
			context?.$toolUtil.message(`导师工号不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.mima)) {
			context?.$toolUtil.message(`密码不能为空`, 'error');
			return false;
		}
		if (registerForm.value.mima != registerForm.value.mima2) {
			context?.$toolUtil.message('两次密码输入不一致', 'error');
			return false;
		}
		if ((!registerForm.value.daoshixingming)) {
			context?.$toolUtil.message(`导师姓名不能为空`, 'error');
			return false;
		}
		if (registerForm.value.touxiang != null) {
			registerForm.value.touxiang = registerForm.value.touxiang.replace(new RegExp(context?.$config.url, "g"), "");
		}
		if ((!registerForm.value.zhicheng && registerForm.value.leixing === '校内导师')) {
			context?.$toolUtil.message(`职称不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.xiangmufenlei)) {
			context?.$toolUtil.message(`项目分类不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.leixing)) {
			context?.$toolUtil.message(`类型不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.zhuanyejingyan)) {
			context?.$toolUtil.message(`专业经验不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.zhidaojingyan)) {
			context?.$toolUtil.message(`指导经验不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.suozaidanwei && registerForm.value.leixing === '校外导师')) {
			context?.$toolUtil.message(`所在单位不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.youxiang)) {
			context?.$toolUtil.message(`邮箱不能为空`, 'error');
			return false;
		}
		if (registerForm.value.youxiang && (!context?.$toolUtil.isEmail(registerForm.value.youxiang))) {
			context?.$toolUtil.message(`邮箱应输入邮件格式`, 'error');
			return false;
		}
		if ((!registerForm.value.lingyuzhuanzhang)) {
			context?.$toolUtil.message(`领域专长不能为空`, 'error');
			return false;
		}
		if ((!registerForm.value.xiangmuleixing)) {
			context?.$toolUtil.message(`可指导项目类型不能为空`, 'error');
			return false;
		}
		if(!registerForm.value.shoujihaoma){
			context?.$toolUtil.message('手机号不能为空', 'error')
			return false
		}
		if(!context?.$toolUtil.isMobile(registerForm.value.shoujihaoma)){
			context?.$toolUtil.message('手机号格式不正确', 'error')
			return false
		}
		if(!smsCode.value){
			context?.$toolUtil.message('请输入短信验证码', 'error')
			return false
		}

		// 添加验证码到请求数据
		const requestData = {
			...registerForm.value,
			emailCode: emailCode.value,
			smsCode: smsCode.value
		};

		// 添加调试日志
		console.log("注册请求数据:", requestData);

		// 将数据转换为URL参数
		const params = new URLSearchParams();
		for (const [key, value] of Object.entries(requestData)) {
			if (value !== undefined && value !== null) {
				params.append(key, value);
			}
		}

		context?.$http({
			url: `${url}?${params.toString()}`,
			method: 'post'
		}).then(res => {
			console.log("注册响应:", res); // 添加调试日志
			context?.$toolUtil.message('注册成功', 'success', obj => {
				context?.$router.push({
					path: "/login"
				});
			});
		}).catch(err => {
			console.error("注册失败:", err); // 添加错误日志
			context?.$toolUtil.message(err.response?.data?.msg || '注册失败，请稍后重试', 'error');
		});
	};

	//返回登录
	const close = () => {
		context?.$router.push({
			path: "/login"
		});
	}
	init()
	onMounted(()=>{

	})
</script>
<style lang="scss" scoped>
.register_view {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
}

.register_container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

/* 左侧背景区域样式 */
.register_left {
	flex: 1;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
	position: relative;
}

.left_content {
	max-width: 500px;
	margin: 0 auto;
}

.left_title {
	font-size: 42px;
	font-weight: bold;
	margin-bottom: 16px;
}

.left_subtitle {
	font-size: 20px;
	margin-bottom: 48px;
	opacity: 0.9;
}

.stats_cards {
	margin-top: 40px;
}

.stat_card {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 24px;
	color: white;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.card_label {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}

.stat_content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stat_item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	
	i {
		font-size: 24px;
	}
}

/* 右侧注册表单区域样式 */
.register_right {
	flex: 1.2;
	background: white;
	padding: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.register_form {
	width: 100%;
	max-width: 600px;
	padding: 20px;
}

.title_view {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 30px;
	color: #333;
	text-align: center;
}

.form-content {
	margin-bottom: 30px;
}

.form-group {
	margin-bottom: 20px;
	width: 100%;
}

.form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	width: 100%;
}

.half {
	flex: 1;
	margin-bottom: 0;
}

.form-label {
	display: block;
	font-size: 14px;
	color: #606266;
	margin-bottom: 8px;
}

.form-input, .form-select {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	transition: border-color 0.2s;
	
	&:focus {
		outline: none;
		border-color: #409EFF;
	}
}

.form-textarea {
	width: 100%;
	padding: 10px 15px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	min-height: 80px;
	resize: vertical;
	transition: border-color 0.2s;
	
	&:focus {
		outline: none;
		border-color: #409EFF;
	}
}

.upload-wrapper {
	width: 100%;
}

.verification-code-wrapper {
	position: relative;
	width: 100%;
	
	.code-input {
		width: 100%;
		padding-right: 120px;
	}
	
	.send-code-btn {
		position: absolute;
		right: 0;
		top: 0;
		height: 40px;
		padding: 0 15px;
		background: #1e88e5;
		color: #fff;
		border: none;
		border-radius: 0 4px 4px 0;
		
		&:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
	}
}

.button-wrapper {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.register-btn {
	width: 100%;
	height: 44px;
	background: #1e88e5;
	border: none;
	color: white;
	font-size: 16px;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s;
	
	&:hover {
		background: #1976d2;
	}
}

.login-link {
	margin-top: 16px;
	color: #1e88e5;
	cursor: pointer;
	font-size: 14px;
	
	&:hover {
		text-decoration: underline;
	}
}

@media screen and (max-width: 1200px) {
	.register_container {
		flex-direction: column;
	}
	
	.register_left {
		display: none;
	}
	
	.register_right {
		padding: 20px;
	}
}

@media screen and (max-width: 768px) {
	.form-row {
		flex-direction: column;
		gap: 20px;
	}
	
	.half {
		width: 100%;
	}
}

/* Custom styling for element-plus components */
:deep(.el-select) {
	width: 100%;
}

:deep(.el-button--primary) {
	background-color: #1e88e5;
	border-color: #1e88e5;
}

:deep(.el-button--primary:hover) {
	background-color: #1976d2;
	border-color: #1976d2;
}
</style>